<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        .nav{
            width: 100%;
            height: 156px;
            display: flex;
            flex-direction: row;
            overflow-x: auto;
        }
        .nav .nav-inner{
            margin-left: 11.5px;
        }
        .nav .nav-inner a{
            width: 61px;
            height: 67px;
            display: flex;
            flex-direction: column;
            margin-top: 3px;
            align-items: center;
        }
        .nav .nav-inner span{
            font-size: 11px;
            color: rgb(102, 102, 102);
        }
        .nav .nav-inner img{width: 100%;}
    </style>
</head>
<body>
    <div class="nav">
        <div class="nav-inner">
            <a href="#">
                <img src="./img/1.png" alt=""><span>天猫新品</span>
            </a>
            <a href="#">
                <img src="./img/2.png" alt=""><span>充值中心</span>
            </a>
        </div>
        <div class="nav-inner">
            <a href="#">
                <img src="./img/3.png" alt=""><span>今日爆款</span>
            </a>
            <a href="#">
                <img src="./img/4.png" alt=""><span>机票酒店</span>
            </a>
        </div>
        <div class="nav-inner">
            <a href="#">
                <img src="./img/5.png" alt=""><span>天猫国际</span>
            </a>
            <a href="#">
                <img src="./img/6.png" alt=""><span>金币庄园</span>
            </a>
        </div>
        <div class="nav-inner">
            <a href="#">
                <img src="./img/7.png" alt=""><span>饿了么</span>
            </a>
            <a href="#">
                <img src="./img/8.png" alt=""><span>阿里拍卖</span>
            </a>
        </div>
        <div class="nav-inner">
            <a href="#">
                <img src="./img/9.png" alt=""><span>天猫超市</span>
            </a>
            <a href="#">
                <img src="./img/10.png" alt=""><span>淘宝吃货</span>
            </a>
        </div>
        <div class="nav-inner">
            <a href="#">
                <img src="./img/11.png" alt=""><span>分类</span>
            </a>
            <a href="#">
                <img src="./img/12.png" alt=""><span>闲鱼</span>
            </a>
        </div>
        <div class="nav-inner">
            <a href="#">
                <img src="./img/13.png" alt=""><span>天猫美食</span>
            </a>
            <a href="#">
                <img src="./img/14.png" alt=""><span>会员中心</span>
            </a>
        </div>
        <div class="nav-inner">
            <a href="#">
                <img src="./img/15.png" alt=""><span>阿里健康</span>
            </a>
            <a href="#">
                <img src="./img/16.png" alt=""><span>造点新货</span>
            </a>
        </div>
        <div class="nav-inner">
            <a href="#">
                <img src="./img/17.png" alt=""><span>口碑生活</span>
            </a>
            <a href="#">
                <img src="./img/18.png" alt=""><span>土货鲜食</span>
            </a>
        </div>
    </div>
</body>
</html>